﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Animation</title>
    <script type="text/javascript">
        const RADIUS = 20;
        var cx = 100;
        var cy = 100;
        var speedX = 2;
        var speedY = 2;
        var _canvas;
        var _context;
        var _reqAnimation;
        var _angle = 0;
        window.onload = function (){
            _canvas = document.getElementById("canvasID");
            _context = _canvas.getContext("2d");
            _context.fillStyle = "red";
            cx = _canvas.width/2;
            cy = _canvas.height/2;
            _reqAnimation = window.requestAnimationFrame || 
                window.mozRequestAnimationFrame || 
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.oRequestAnimationFrame ;
            if(_reqAnimation)
                update();
            else
                alert("Your browser doesn't support requestAnimationFrame.");
                
        };
        function update(time){
            cx += speedX;
            cy += speedY;
            if(cx < 0 || cx > _canvas.width)
                speedX = -speedX;
            if(cy < 0 || cy > _canvas.height)
                speedY = -speedY
            //draw
            _context.clearRect(0, 0, _canvas.width, _canvas.height);
            _context.beginPath();
            _context.arc(cx, cy, RADIUS, 0, Math.PI * 2, false);
           
            _context.closePath();
            _context.fill();
            _reqAnimation(update);
        };
         
    </script>
</head>
<body>
    <canvas id="canvasID" width="400" height="300" style="border: 1px solid black"></canvas>
</body>
</html>
